<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../libs/element-ui/index.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />

		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			#app {
				margin: auto 10px;
			}
			
			.nums {
				list-style: none;
				display: inline-block;
			}
			
			.nums li {
				height: 30px;
				width: 30px;
				float: left;
				margin: 5px;
				/*border:solid 2px;*/
				border-radius: 70%;
				text-align: center;
				line-height: 30px;
			}
			
			.checked {
				background: red;
			}
			
			.unchecked {
				border: solid 1px;
			}
			
			.nums li:hover {
				cursor: pointer;
			}
			
			#table-3 thead,
			#table-3 tr {
				border-top-width: 1px;
				border-top-style: solid;
				border-top-color: rgb(235, 242, 224);
			}
			
			#table-3 {
				border-bottom-width: 1px;
				border-bottom-style: solid;
				border-bottom-color: rgb(235, 242, 224);
				margin: 10px auto;
			}
			/* Padding and font style */
			
			#table-3 td,
			#table-3 th {
				padding: 5px 10px;
				font-size: 12px;
				font-family: Verdana;
				color: rgb(149, 170, 109);
			}
			/* Alternating background colors */
			
			#table-3 tr:nth-child(even) {
				background: rgb(230, 238, 214)
			}
			
			#table-3 tr:nth-child(odd) {
				background: #FFF
			}
		</style>

	</head>

	<body>
		<div id="app" class="mui-content">
			<form>
				<label>组三</label>
				<input name="radio" type="radio" value='0' v-model="type">
				<label>组六</label>
				<input name="radio" type="radio" value='1' checked v-model="type">
			</form>

			<ul class="nums" v-show="true">
				<li v-for="(num, index) in nums" v-bind:class="[num.ischecked?'checked':'unchecked']" @click="onclick(index,num)">{{num.num}}</li>
			</ul>

			<button @click="selAll(event)">全选</button>
			<form>
				<label>元</label>
				<input name="radio" type="radio" value='1' v-model="percent" checked>
				<label>角</label>
				<input name="radio" type="radio" value='2' checked v-model="percent">
				<label>分</label>
				<input name="radio" type="radio" value='3' v-model="percent">
			</form>
			<button @click="buy()" class="mui-btn mui-btn-block">买</button>
			<button @click="getdata" class="mui-btn mui-btn-block">获取数据</button>
			<div>
				<p>开始时间{{openinfo.start}}</p>
				<p>截止时间{{openinfo.end}}</p>
				<p>第{{openinfo.issue}}期</p>
			</div>
			<div>
				<table border="" cellspacing="" cellpadding="" id="table-3">
					<tr>
						<th>类型</th>
						<th>三个数</th>
						<th>六个数</th>
						<th>全个数</th>
					</tr>
					<tr v-for="data in statdatas">
						<td>{{data.name}}</td>
						<td>{{data.zu3}}</td>
						<td>{{data.zu6}}</td>
						<td>{{data.quan}}</td>
					</tr>
				</table>
				<table border="" cellspacing="" cellpadding="" id="table-3">
					<tr>
						<th>类型</th>
						<th>三个数</th>
					</tr>
					<tr v-for="data in datas">
						<td>{{data.issue_no}}</td>
						<td>{{data.prize_num.split(',').splice(2,3)}}</td>
					</tr>
				</table>
				<button @click="test()"></button>
			</div>
		</div>

		<script src="../libs/vue/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../libs/element-ui/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="../libs/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../libs/md5.min.js"></script>
		<script type="text/javascript" src="../libs/jquery/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="../js/api.js"></script>
		<script type="text/javascript">
			
			function isnumtype(str) {
				// 0:组三    1:组六  2:豹子
				var chars = str.split(',');
				chars = chars.splice(2, 3);
				if(chars[0] === chars[1] && chars[0] === chars[2] && chars[1] === chars[2]) {
					return 2;
				}
				if(chars[0] !== chars[1] && chars[0] !== chars[2] && chars[1] !== chars[2]) {
					return 1;
				}
				return 0;
			}

			function formatDateTime(inputTime) {
				var unixTimestamp = new Date(inputTime * 1000)
				commonTime = unixTimestamp.toLocaleString();
				
				return unixTimestamp.Format("yyyy-MM-dd hh:mm:ss");
			};

			new Vue({
				el: '#app',
				data: {
					ischeckedall: true,
					nums: [{
						ischecked: false,
						num: '0'
					}, {
						ischecked: false,
						num: '1'
					}, {
						ischecked: false,
						num: '2'
					}, {
						ischecked: false,
						num: '3'
					}, {
						ischecked: false,
						num: '4'
					}, {
						ischecked: false,
						num: '5'
					}, {
						ischecked: false,
						num: '6'
					}, {
						ischecked: false,
						num: '7'
					}, {
						ischecked: false,
						num: '8'
					}, {
						ischecked: false,
						num: '9'
					}],
					types: ["A", "B"],
					type: 0,
					percent: 1,
					openinfo: {},
					datas: []

				},
				methods: {
					onclick: function(index, num) {
						if(num.ischecked) {
							num.ischecked = false;
						} else {
							num.ischecked = true;
						}
					},
					test:function(){
						alert(api.islogin());
					},
					selAll: function(e) {
						for(var i = 0; i < this.nums.length; i++) {
							this.nums[i].ischecked = this.ischeckedall;
						}

						this.ischeckedall = !this.ischeckedall;
						if(this.ischeckedall) {
							e.target.innerHTML = "全选"
						} else {
							e.target.innerHTML = "反选"
						}
					},
					getdata: function() {
						this.datas = api.get_last_100();
						var ret = api.get_now_issue();
						this.openinfo["start"] = formatDateTime(ret["start_time"]);
						this.openinfo["end"] = formatDateTime(ret["end_time"]);
						this.openinfo["issue"] = ret["issue_no"]

					},
					buy: function() {
						//api.buy("后三组三",1)
						var table={0:"后三组三",1:"后三组六"};
						api.buy(table[this.type],this.percent);
					}
				},
				computed: {
					selnums: function() {
						var tmp = []
						for(var i = 0; i < this.nums.length; i++) {
							if(this.nums[i].ischecked) {
								tmp.push(this.nums[i])
							}
						}
						return tmp
					},
					statdatas: function() {
						var tmp = [];
						var total5_3 = 0;
						var total5_6 = 0;
						var total10_3 = 0;
						var total10_6 = 0;
						var total20_3 = 0;
						var total20_6 = 0;
						var total50_3 = 0;
						var total50_6 = 0;
						var total100_3 = 0;
						var total100_6 = 0;
						$.each(this.datas, function(index, value) {
							var t = isnumtype(value['prize_num']);
							
							if(index < 5) {
								if(t === 0) {
									
									total5_3 = total5_3 + 1;
								} else if(t === 1) {
									total5_6 = total5_6 + 1;
								}

							}

							if(index < 10) {
								if(t === 0) {
									total10_3 = total10_3 + 1;
								} else if(t === 1) {
									total10_6 = total10_6 + 1;
								}
							}

							if(index < 20) {
								if(t === 0) {
									total20_3 = total20_3 + 1;
								} else if(t === 1) {
									total20_6 = total20_6 + 1;
								}
							}
							if(index < 50) {

								if(t === 0) {
									total50_3 = total50_3 + 1;
								} else if(t === 1) {
									total50_6 = total50_6 + 1;
								}
							}

							if(index < 100) {
								if(t === 0) {
									total100_3 = total100_3 + 1;
								} else if(t === 1) {
									total100_6 = total100_6 + 1;
								}
							}

						});
						tmp.push({
							name: "前5",
							zu3: total5_3,
							zu6: total5_6,
							quan: (5 - total5_3 - total5_6)
						});
						tmp.push({
							name: "前10",
							zu3: total10_3,
							zu6: total10_6,
							quan: (10 - total10_3 - total10_6)
						});
						tmp.push({
							name: "前20",
							zu3: total20_3,
							zu6: total20_6,
							quan: (20 - total20_3 - total20_6)
						});
						tmp.push({
							name: "前50",
							zu3: total50_3,
							zu6: total50_6,
							quan: (50 - total50_3 - total50_6)
						});
						tmp.push({
							name: "前100",
							zu3: total100_3,
							zu6: total100_6,
							quan: (100 - total100_3 - total100_6)
						});
						return tmp;
					}
				}
			})

			$(function() {

			});
		</script>
	</body>

</html>